<template>
   <!-- gutter属性是间隔20行 -->
   <el-row class="home" :gutter="20">
      <!-- span占用24行 一列 -->
       <el-col :span="8" style="margin-top:20px">
          <!-- 放一个小卡片 -->
          <el-card shadow='hover'>
             <div class="user">
                <img :src="userimg" >
                <div class="userinfo">
                   <p class="name">Admin</p>
                   <p class="access">超级管理员</p>
                </div>
             </div>
             <div class="login-info">
                <p>上次登录时间：<span>2022-4-15</span></p>
                 <p>上次登录地点<span >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;广州</span></p>
             </div>
          </el-card>
          <!-- 表格 -->
          <el-card style="margin-top:20px;height:460px;">
               <el-table :data='tableData'>
                  <!-- 遍历tablelabel的数据一列一列的的单元格 直接绑定实际数据就可实现动态生成table -->
                   <el-table-column v-for="(value,key) in tablelabel " :key="key"
                        :prop="key"
                        :label="value">
                        </el-table-column>
                     <!-- <el-table-column
                        prop="name"
                        label="课程"
                        width="90">
                        </el-table-column>
                        <el-table-column
                        prop="todayBuy"
                        label="今日购买"
                        width="90">
                        </el-table-column>
                        <el-table-column
                        prop="monthBuy"
                        label="本月购买"
                        width="90">
                        </el-table-column>
                         <el-table-column
                        prop="totalBuy"
                        label="总购物"
                        width="90">
                        </el-table-column> -->
               </el-table>
          </el-card>
       </el-col>
       <!-- 后边那一列 -->
       <el-col :span='16' style='margin-top:20px'>
          <!-- top -->
          <div class="num">
             <el-card v-for='item in countData' :key='item.name' body-style="display:flex;padding:0;" >
                <i class="icon" :class='"el-icon-"+item.icon' :style="'background:'+item.color"></i>
                <div class="detail">
                   <p class="num">￥{{item.value}}</p>
                   <p class="txt">{{item.name}}</p>
                </div> 
             </el-card>
          </div>
          <!-- 图表 -->
          <el-card style='height:280px'>
             <!-- <div style='height:280px' ref='echarts'></div> -->
             <echart :chartData="echartData.order" style='height:280px'></echart>
          </el-card>
          <div class="graph">
             <el-card style='height:260px'>
                <!-- <div style="height:240px" ref="userEcharts"></div> -->
                 <echart :chartData="echartData.user" style='height:240px'></echart>
             </el-card>
             <el-card style='height:260px'>
                <!-- <div style="height:240px" ref="videoEcharts"></div> -->
                 <echart :chartData="echartData.video"  :isAxisChart="false"  style='height:240px'></echart>
             </el-card>
          </div>
       </el-col>
   </el-row>
</template>

<script>
import {getData} from '../../../api/data.js'
// 导入echarts

// 二次封装图表
import Echart from '../../components/Echars.vue'

export default {
   name: 'home',
   components:{
     Echart
   },
   data(){
     return{
        userimg:require("../../images/user.png"),
        tableData:[
         //  {
         //    name: 'oppo',
         //    todayBuy: 90,
         //    monthBuy: 300,
         //    totalBuy: 800
         //  },
         //  {
         //    name: 'vivo',
         //    todayBuy: 90,
         //    monthBuy: 300,
         //    totalBuy: 800
         //  },
         //  {
         //    name: '苹果',
         //    todayBuy: 90,
         //    monthBuy: 300,
         //    totalBuy: 800
         //  },
         //  {
         //    name: '小米',
         //    todayBuy: 90,
         //    monthBuy: 300,
         //    totalBuy: 800
         //  },
         //  {
         //    name: '三星',
         //    todayBuy: 90,
         //    monthBuy: 300,
         //    totalBuy: 800
         //  },
         //  {
         //    name: '魅族',
         //   todayBuy: 90,
         //    monthBuy: 300,
         //    totalBuy: 800
         //  }
        ],
        tablelabel:{
             name:"课程",
             todayBuy:"今日购买",
             monthBuy:"本月购买",
             totalBuy:"总购物"
        },
      //   右上角数据
       countData: [
        {
          name: "今日支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9",
        },
        {
          name: "今日收藏订单",
          value: 210,
          icon: "star-on",
          color: "#ffb980",
        },
        {
          name: "今日未支付订单",
          value: 1234,
          icon: "s-goods",
          color: "#5ab1ef",
        },
        {
          name: "本月支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9",
        },
        {
          name: "本月收藏订单",
          value: 210,
          icon: "star-on",
          color: "#ffb980",
        },
        {
          name: "本月未支付订单",
          value: 1234,
          icon: "s-goods",
          color: "#5ab1ef",
        },
      ], 
      echartData:{
         order:{
            xData:[],
            series:[]
         },
         user:{
             xData:[],
            series:[]
         },
         video:{
             series:[]
         }
      }
     }
   },
   // 接口一般写在mounted
   mounted(){
      // 调用接口 通过then可以拿到响应
      // this.$http.get('/user?ID=123')
      // .then(function(response){                                              
      //    console.log(response);
      // })
      // .catch(function(error){
      //    console.log(error);
      // }),
      getData().then(res=>{
         const {code,data}=res.data
         // console.log(res.data.data.tableData);
         this.tableData=res.data.data.tableData;//实现后端模拟的数据 返回动态返回到table页面

         if(code===20000){
            const order=data.orderData//折线图数据
            const xData =order.date//折线图x轴数据
            // 把各个名牌的名字弄成一个数组ketArray
            const ketArray=Object.keys(order.data[0])
             // console.log(ketArray);
            // ['苹果', 'vivo', 'oppo', '魅族', '三星', '小米']
            const series=[]
         //   循环每一个名字 再里面map()组成一个新的数组 
         // item[苹果]存在苹果数组
            ketArray.forEach(key=>{
                  series.push({
                     name:key,
                     // data就变成全是苹果数字的数组
                     // 再循环就是三星的数字的数组
                     data:order.data.map(item=>item[key]),
                     type:'line'
                  })
                  // console.log(series);    
            })

            // const option ={
            //    xAxis:{
            //       data:xData
            //    },
            //    yAxis:{},
            //    legend:{
            //       data:ketArray
            //    },
            //    series,
            //    tooltip: {},
            // }
            // 吧拿到的数据传入本数据内
            this.echartData.order.xData=xData
            this.echartData.order.series=series
            // const E =echarts.init(this.$refs.echarts)
            // E.setOption(option)
            // 柱状图
            // const userOption={
            //           legend: {
            //        // 图例文字颜色
            //        textStyle: {
            //        color: "#333",
            //        },
            //       },
            //       grid: {
            //          left: "20%",
            //       },
            //       // 提示框
            //       tooltip: {
            //          trigger: "axis",
            //       },
            //       xAxis: {
            //          type: "category", // 类目轴
            //          data: data.userData.map(item=>item.date),
            //          axisLine: {
            //          lineStyle: {
            //             color: "#17b3a3",
            //          },
            //          },
            //          axisLabel: {
            //          interval: 0,
            //          color: "#333",
            //          },
            //       },
            //       yAxis: [
            //          {
            //          type: "value",
            //          axisLine: {
            //             lineStyle: {
            //                color: "#17b3a3",
            //             },
            //          },
            //          },
            //       ],
            //       color: ["#2ec7c9", "#b6a2de"],
            //       series: [{
            //          name:'新增用户',
            //          data:data.userData.map(item=>item.new),
            //          type:'bar'
            //       },
            //       {
            //           name:'活跃用户',
            //          data:data.userData.map(item=>item.active),
            //          type:'bar'
            //       }],
            // }
             this.echartData.user.xData=data.userData.map(item=>item.date),
            this.echartData.user.series=[{
                     name:'新增用户',
                     data:data.userData.map(item=>item.new),
                     type:'bar'
                  },
                  {
                      name:'活跃用户',
                     data:data.userData.map(item=>item.active),
                     type:'bar'
                  }]
            // const U=echarts.init(this.$refs.userEcharts)
            // U.setOption(userOption)
            // 饼图
            // const videoOption={
            //      tooltip: {
            //          trigger: "item",
            //       },
            //       color: [
            //          "#0f78f4",
            //          "#dd536b",
            //          "#9462e5",
            //          "#a6a6a6",
            //          "#e1bb22",
            //          "#39c362",
            //          "#3ed1cf",
            //       ],
            //       series: [
            //          {
            //             data:data.videoData,
            //             type:'pie'
            //          }
            //       ],
            //          }
            this.echartData.video.series=[
                     {
                        data:data.videoData,
                        type:'pie'
                     }
                  ]
               // const V=echarts.init(this.$refs.videoEcharts)
               // V.setOption(videoOption)
         }
         // console.log(res);
      })
   }
}
</script>

<style>
</style>